<template>
    <div>
        <el-card class="box-card">
            <div style="display:flex;justify-content: space-between">
                <div>
                    <el-input v-model="queryData.tagsGroupName" placeholder="标签组名称" size="small"></el-input>
                    <el-select v-model="queryData.visibleRange" placeholder="显示范围" size="small">
                        <el-option v-for="item in visibleRange" :key="item.value" :label="item.label"
                                   :value="item.value">
                        </el-option>
                    </el-select>&nbsp;&nbsp;
                    <el-button type="primary" @click="queryDataHandle(1, 10)" size="small">查询</el-button>
<!--                    <el-divider direction="vertical"></el-divider>-->
                    <el-button type="primary" @click="resetQuery" size="small">重置</el-button>
                </div>
                <div>
                    <el-button type="primary" @click="tagGroupVisible = true" size="small">添加标签组</el-button>
<!--                    <el-divider direction="vertical"></el-divider>
                    <el-button plain size="small" @click="syncHandle">同步企微标签</el-button>-->
                </div>
            </div>
        </el-card>

        <div class="interspaceH"></div>

        <el-card class="box-card">
            <el-table :data="dataSource" :header-cell-style="{background:'#F3F4F7',color:'#555'}" style="width: 100%">
                <el-table-column prop="tagsGroupName" label="标签组名称"></el-table-column>
                <el-table-column prop="visibleRange" label="显示范围" :formatter="formatter"></el-table-column>
                <el-table-column label="添加标签" width="1200">
                    <template slot-scope="scope">
                        <el-tag :key="item.tagsId" v-for="item in scope.row.tagList" :disable-transitions="false"
                                style="margin-bottom: 5px">{{ item.clientTagsName }}
                        </el-tag>
                        <el-input
                                class="input-new-tag"
                                v-if="scope.row.inputVisible"
                                v-model="scope.row.inputValue"
                                width="30px"
                                clearable
                                ref="saveTagInput"
                                size="mini"
                                @keyup.enter.native="handleInputConfirm(scope)"
                                @blur="handleInputConfirm(scope)">
                        </el-input>
                        <el-button v-else class="button-new-tag" size="small" @click="showInput(scope)">+添加</el-button>
                    </template>
                </el-table-column>
<!--                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="updateHandle" type="text" size="small">修改</el-button>
                    </template>
                </el-table-column>-->
            </el-table>

            <div class="interspaceH"></div>

            <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                           @current-change="queryDataHandle($event,pagePagination.pageSize)"
                           :current-page="pagePagination.currentPage"
                           :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                           layout="total, sizes, prev, pager, next"
                           :total="pagePagination.total">
            </el-pagination>
        </el-card>

        <el-dialog
                width="40%"
                title="添加标签组"
                :visible.sync="tagGroupVisible"
                append-to-body>

            <CreateGroupTag ref="createGroupTag"/>

            <div slot="footer" class="dialog-footer">
                <el-button @click="tagGroupVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="submitFormHandle" size="small">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import CreateGroupTag from "@/views/customer/client/client_create_group_tag"

const queryData = {
    tagsGroupName: '',//标签名称
    visibleRange: '',//部门
}

//多选框 - 开始
const visibleRange = [
    {
        value: '0',
        label: '全部员工'
    },
    {
        value: '1',
        label: '部门可见'
    }
]
//多选框 - 结束

export default {
    components: {CreateGroupTag},
    data() {
        return {
            tablePage: 0,
            visibleRange: visibleRange,
            tagGroupVisible: false,
            queryData: {...queryData},
            fieldType: {
                visibleRange: "array"
            },
            dataSource: [],
            pagePagination: {
                currentPage: 1,
                pageSizes: [10, 15, 20, 25],
                pageSize: 10,
                total: 0
            }
        }
    },
    mounted() {
        this.queryDataHandle()
    },
    methods: {
        queryDataHandle(page = 1, row = 10) {
            let payload = {
                ...this.queryData,
                tagsGroupType: "0",
                pageNum: page,
                pageSize: row
            }
            this.$request("/api/tags/getGroupTagsPageByParams/1_0", payload, "POST").then((data) => {
                this.dataSource = [...data.rows]
                this.pagePagination['total'] = data.total
                this.pagePagination['pageSize'] = data.row
            })
        },
        resetQuery() {
            this.queryData = {...queryData}
        },
        formatter(row, column) {
            let field = column.property;
            let value = row[field];
            return this.$utils.formatterForLable(field, value, this.fieldType, this[field]);
        },
        updateHandle() {
            this.$prompt('请输入新标签组名称', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({ value }) => {
                this.$message({
                    type: 'success',
                    message: '新标签组名称: ' + value
                });
            })
        },
        showInput(data) {
            let index = data.$index;
            let dataSource = this.dataSource
            dataSource[index].inputVisible = true;
            let dataJson = JSON.stringify(dataSource)
            this.dataSource = JSON.parse(dataJson)
            this.$nextTick(() => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        handleInputConfirm(data) {
            let index = data.$index;
            let inputValue = this.dataSource[index].inputValue;
            if (inputValue) {
                let payload = {
                    tagsGroupId: this.dataSource[index]['tagsGroupId'],
                    clientTagsName: inputValue,
                    createType: 'tag'
                }
                this.$request("/api/tags/insertGroupAndTags/1_0", payload, "POST").then((data) => {
                    this.$message.success("标签添加成功")
                    this.dataSource[index].inputVisible = false;
                    this.dataSource[index].tagValue = '';
                    this.queryDataHandle()
                })
                this.dataSource[index].tagNameList.push(inputValue);
            } else {
                this.dataSource[index].inputVisible = false;
                this.dataSource[index].inputValue = '';
                this.queryDataHandle()
            }
        },
        submitFormHandle() {
            this.$nextTick(() => {
                let payload = this.$refs.createGroupTag.getFormData()

                if (payload == null) {
                    return
                }

                this.$request("/api/tags/insertGroupAndTags/1_0", payload, "POST").then((data) => {
                    this.$message.success("添加成功")
                    this.tagGroupVisible = false
                    this.$refs.createGroupTag.resetFormData()
                    this.queryDataHandle()
                })
            })

        },
        syncHandle() {
            this.$request("/api/tags/syncTags/1_0", "", "GET")
        }
    }
}
</script>

<style scoped>
.el-input /deep/ {
    width: 200px;
}

.el-select /deep/ {
    width: 200px;
}
</style>
<style>
.el-tag + .el-tag {
    margin-left: 10px;
}

.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

.input-new-tag {
    margin-bottom: 5px;
    margin-left: 10px;
    vertical-align: bottom;
}
</style>
